<script>
import { defineComponent } from 'vue'
import { saveOrUpdate } from '@/api/epidemic'
import pca from '@/assets/pca.json'
const transform = (input) => {
  const outputList = []
  if (Array.isArray(input)) {
    // eslint-disable-next-line no-unused-vars
    for (const child of input) {
      // console.log(child)
      const output = {}
      output.value = child.name
      output.label = child.name
      if (child.children) {
        output.children = transform(child.children)
      }
      outputList.push(output)
    }
  } else {
    return {
      value: input.name,
      label: input.name,
      children: transform(input.children) || undefined
    }
  }
  return outputList
}

export default defineComponent({
  props: {
    id: {
      type: Number,
      default: null
    },
    data: {
      type: [Object, undefined, null],
      default: undefined
    }
  },
  data() {
    return {
      options: transform(
        pca
          .filter((o) => o.name === '江苏省')
          .map((v) => {
            v.children = v.children.filter((o) => o.name === '苏州市')
            return v
          })
      ),
      form: { selected: [] },
      rules: {
        selected: [
          {
            required: true,
            message: '请选择地区'
          },
          {
            type: 'array',
            min: 3,
            message: '请选择地区'
          }
        ],
        confirmed: [
          { required: true, message: '确诊不能为空' },
          { type: 'number', message: '确诊必须为数字值' }
        ],
        suspected: [
          { required: true, message: '疑似不能为空' },
          { type: 'number', message: '疑似必须为数字值' }
        ],
        dead: [
          { required: true, message: '死亡不能为空' },
          { type: 'number', message: '死亡必须为数字值' }
        ],
        cure: [
          { required: true, message: '治愈不能为空' },
          { type: 'number', message: '治愈必须为数字值' }
        ],
        severe: [
          { required: true, message: '重症不能为空' },
          { type: 'number', message: '重症必须为数字值' }
        ],
        outside: [
          { required: true, message: '境外输入不能为空' },
          { type: 'number', message: '境外输入必须为数字值' }
        ]
      }
    }
  },
  watch: {
    data: {
      handler(val) {
        // console.log(val)
        if (val) {
          this.form = JSON.parse(JSON.stringify(val))
          this.$set(this.form, 'selected', [val.province, val.city, val.area])
        }
      },
      immediate: true
    },
    form: {
      handler(form) {
        console.log(form)
        if (!form?.selected?.length) {
          this.$set(this.form, 'province', '')
          this.$set(this.form, 'city', '')
          this.$set(this.form, 'area', '')
        } else {
          this.$set(this.form, 'province', form.selected[0])
          this.$set(this.form, 'city', form.selected[1])
          this.$set(this.form, 'area', form.selected[2])
        }
      },
      deep: true
    }
  },
  methods: {
    onSubmit(e) {
      e.preventDefault()
      // console.log(JSON.stringify(this.form, undefined, 2))
      if (!this.form.province || !this.form.city || !this.form.area) {
        this.$message.error('请选择城市')
        return
      }
      this.$refs.form.validate((valid) => {
        if (!valid) {
          this.$message.error('请检查表单输入！')
          return
        }
        this.form.country = '中国'
        // eslint-disable-next-line no-unused-vars
        saveOrUpdate(this.form).then((res) => {
          this.$message.success(
            !this.id ? '数据已添加成功！' : '数据已更新成功！'
          )
          this.selected = []
          this.form = { selected: [] }
          this.$refs.form.resetFields()
          this.$emit('on-submit-success')
        })
      })
    }
  }
})
</script>

<template>
  <el-form
    ref="form"
    :model="form"
    label-width="80px"
    class="epidemic-input-form"
    :rules="rules"
  >
    <el-form-item label="地区" prop="selected">
      <el-cascader-panel
        v-model="form.selected"
        :options="options"
      ></el-cascader-panel>
    </el-form-item>
    <el-form-item label="确诊" prop="confirmed">
      <el-input v-model.number="form.confirmed"></el-input>
    </el-form-item>
    <el-form-item label="疑似" prop="suspected">
      <el-input v-model.number="form.suspected"></el-input>
    </el-form-item>
    <el-form-item label="死亡" prop="dead">
      <el-input v-model.number="form.dead"></el-input>
    </el-form-item>
    <el-form-item label="治愈" prop="cure">
      <el-input v-model.number="form.cure"></el-input>
    </el-form-item>
    <el-form-item label="重症" prop="severe">
      <el-input v-model.number="form.severe"></el-input>
    </el-form-item>
    <el-form-item label="境外输入" prop="outside">
      <el-input v-model.number="form.outside"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"> 提交 </el-button>
    </el-form-item>
  </el-form>
</template>
